<template>
  <div class="component-attribute">
    <block v-if="editConfigCom && editConfigCom.id">
      <div class="component-attribute-item component-attribute-info">
        <h3 class="title">内容设置</h3>
        <component :is="curCom" />
      </div>
      <div
        class="component-attribute-item component-attribute-info"
        v-if="editConfigCom.style"
      >
        <h3 class="title">样式设置</h3>
        <u-cell-group
          :border="false"
          title="盒子"
          v-if="
            (editConfigCom.style &&
              editConfigCom.style.hasOwnProperty('width')) ||
            (editConfigCom.style &&
              editConfigCom.style.hasOwnProperty('height'))
          "
        >
          <cus-cell
            title="组件宽度"
            :border="false"
            v-if="
              editConfigCom.style && editConfigCom.style.hasOwnProperty('width')
            "
          >
            <div class="u-slot-slider">
              <u-slider
                v-model="comWidth"
                :max="100"
                @changing="onChangeComSize('width')"
              />
              <text class="value-text">{{ comWidth || "-" }}</text>
            </div>
          </cus-cell>
          <cus-cell
            title="组件高度"
            :border="false"
            v-if="
              editConfigCom.style &&
              editConfigCom.style.hasOwnProperty('height')
            "
          >
            <div class="u-slot-slider">
              <u-slider
                v-model="comHeight"
                :max="1000"
                @changing="onChangeComSize('height')"
              />
              <text class="value-text">{{ comHeight || "-" }}</text>
            </div>
          </cus-cell>
        </u-cell-group>

        <!--      <u-cell-group title="位置">-->
        <!--        <cus-cell-->
        <!--          title="定位"-->
        <!--          :border="false"-->
        <!--          v-if="editConfigCom.style.hasOwnProperty('position')"-->
        <!--        >-->
        <!--          <div  class="u-slot-position">-->
        <!--            <u-radio-group-->
        <!--              v-model="editConfigCom.style.position"-->
        <!--              placement="row"-->
        <!--            >-->
        <!--              <u-radio-->
        <!--                :customStyle="{ marginLeft: '8px' }"-->
        <!--                v-for="(item, index) in positionList"-->
        <!--                :key="index"-->
        <!--                :label="item.name"-->
        <!--                :name="item.value"-->
        <!--                size="1rem"-->
        <!--              >-->
        <!--              </u-radio>-->
        <!--            </u-radio-group>-->
        <!--          </div>-->
        <!--        </cus-cell>-->
        <!--        <cus-cell-->
        <!--          title="距离上边"-->
        <!--          :border="false"-->
        <!--          v-if="editConfigCom.style.hasOwnProperty('top')"-->
        <!--        >-->
        <!--          <div  class="u-slot-slider">-->
        <!--            <u-slider-->
        <!--              v-model="positionTop"-->
        <!--              :max="200"-->
        <!--              @changing="onChangeComPosition('top', positionTop)"-->
        <!--            />-->
        <!--          </div>-->
        <!--        </cus-cell>-->
        <!--        <cus-cell-->
        <!--          title="距离下边"-->
        <!--          :border="false"-->
        <!--          v-if="editConfigCom.style.hasOwnProperty('bottom')"-->
        <!--        >-->
        <!--          <div  class="u-slot-slider">-->
        <!--            <u-slider-->
        <!--              v-model="positionBottom"-->
        <!--              :max="200"-->
        <!--              @changing="onChangeComPosition('bottom', positionBottom)"-->
        <!--            />-->
        <!--          </div>-->
        <!--        </cus-cell>-->
        <!--        <cus-cell-->
        <!--          title="距离左边"-->
        <!--          :border="false"-->
        <!--          v-if="editConfigCom.style.hasOwnProperty('left')"-->
        <!--        >-->
        <!--          <div  class="u-slot-slider">-->
        <!--            <u-slider-->
        <!--              v-model="positionLeft"-->
        <!--              :max="200"-->
        <!--              @changing="onChangeComPosition('left', positionLeft)"-->
        <!--            />-->
        <!--          </div>-->
        <!--        </cus-cell>-->
        <!--        <cus-cell-->
        <!--          title="距离右边"-->
        <!--          :border="false"-->
        <!--          v-if="editConfigCom.style.hasOwnProperty('right')"-->
        <!--        >-->
        <!--          <div  class="u-slot-slider">-->
        <!--            <u-slider-->
        <!--              v-model="positionRight"-->
        <!--              :max="200"-->
        <!--              @changing="onChangeComPosition('right', positionRight)"-->
        <!--            />-->
        <!--          </div>-->
        <!--        </cus-cell>-->
        <!--      </u-cell-group>-->

        <u-cell-group
          :border="false"
          title="边距"
          v-if="
            editConfigCom.style.hasOwnProperty('marginTop') ||
            editConfigCom.style.hasOwnProperty('marginBottom') ||
            editConfigCom.style.hasOwnProperty('marginLeft') ||
            editConfigCom.style.hasOwnProperty('marginRight')
          "
        >
          <cus-cell
            title="自动居中"
            :border="false"
            v-if="
              editConfigCom.style &&
              editConfigCom.style.hasOwnProperty('marginRight') &&
              editConfigCom.style.hasOwnProperty('marginLeft')
            "
          >
            <div class="u-slot-slider">
              <u-switch
                size="20"
                v-model="marginAuto"
                @change="onChangeMarginAuto"
                :activeColor="$theme.themeColor.primary"
              ></u-switch>
            </div>
          </cus-cell>
          <cus-cell
            title="上边距"
            :border="false"
            v-if="
              editConfigCom.style &&
              editConfigCom.style.hasOwnProperty('marginTop')
            "
          >
            <div class="u-slot-slider">
              <u-slider
                v-model="marginTop"
                :max="200"
                @changing="onChangeComMargin('marginTop', marginTop)"
              />
              <text class="value-text">{{ marginTop }}</text>
            </div>
          </cus-cell>
          <cus-cell
            title="下边距"
            :border="false"
            v-if="
              editConfigCom.style &&
              editConfigCom.style.hasOwnProperty('marginBottom')
            "
          >
            <div class="u-slot-slider">
              <u-slider
                v-model="marginBottom"
                :max="200"
                @changing="onChangeComMargin('marginBottom', marginBottom)"
              />

              <text class="value-text">{{ marginBottom }}</text>
            </div>
          </cus-cell>
          <cus-cell
            title="左边距"
            :border="false"
            v-if="
              editConfigCom.style &&
              editConfigCom.style.hasOwnProperty('marginLeft')
            "
          >
            <div class="u-slot-slider">
              <u-slider
                v-model="marginLeft"
                :max="200"
                @changing="onChangeComMargin('marginLeft', marginLeft)"
              />
              <text class="value-text">{{ marginLeft }}</text>
            </div>
          </cus-cell>
          <cus-cell
            title="右边距"
            :border="false"
            v-if="
              editConfigCom.style &&
              editConfigCom.style.hasOwnProperty('marginRight')
            "
          >
            <div class="u-slot-slider">
              <u-slider
                v-model="marginRight"
                :max="200"
                @changing="onChangeComMargin('marginRight', marginRight)"
              />

              <text class="value-text">{{ marginRight }}</text>
            </div>
          </cus-cell>
        </u-cell-group>

        <u-cell-group
          title="圆角"
          :border="false"
          v-if="
            editConfigCom.style &&
            editConfigCom.style.hasOwnProperty('borderRadius')
          "
        >
          <cus-cell title="圆角" :border="false">
            <div class="u-slot-slider">
              <u-slider
                v-model="borderRadius"
                :max="200"
                @changing="
                  onChangeComBorderRadius('borderRadius', borderRadius)
                "
              />
              <text class="value-text">{{ borderRadius }}</text>
            </div>
          </cus-cell>
        </u-cell-group>
      </div>
    </block>
    <div v-else>
      <u-empty
        mode="data"
        text="暂无组件，请添加/点击一个组件吧~"
        icon="https://cdn.uviewui.com/uview/empty/data.png"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "componentAttribute",
  components: {},
  data() {
    return {
      curCom: "",
      modules: {},
      //宽高
      comWidth: 0,
      comHeight: 0,
      //定位
      positionList: [
        {
          name: "默认",
          value: "static",
        },
        {
          name: "固定",
          value: "fixed",
        },
        {
          name: "相对定位",
          value: "relative",
        },
        {
          name: "绝对定位",
          value: "absolute",
        },
      ],
      positionTop: "",
      positionBottom: "",
      positionLeft: "",
      positionRight: "",
      //边距
      marginTop: "",
      marginBottom: "",
      marginLeft: "",
      marginRight: "",
      marginAuto: false,
      borderRadius: "",
    };
  },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  watch: {
    editConfigComActiveId() {
      this.initPageCom();
    },
    marginLeft(val) {
      this.marginAuto = val === "auto" && this.marginRight === "auto";
    },
    marginRight(val) {
      this.marginAuto = this.marginLeft === "auto" && val === "auto";
    },
  },
  created() {},
  mounted() {
    this.initComponent();
  },
  methods: {
    //初始化基本样式属性
    initComponentData() {
      this.comWidth = this.editConfigCom?.style?.width?.replace("%", "");
      this.comHeight = this.editConfigCom?.style?.height?.replace("rpx", "");
      // this.positionTop = this.editConfigCom?.style?.top?.replace("rpx", "");
      // this.positionBottom = this.editConfigCom?.style?.bottom?.replace("rpx", "");
      // this.positionLeft = this.editConfigCom?.style?.left?.replace("rpx", "");
      // this.positionRight = this.editConfigCom?.style?.right?.replace("rpx", "");

      this.marginTop = this.editConfigCom?.style?.marginTop?.replace("rpx", "");
      this.marginBottom = this.editConfigCom?.style?.marginBottom?.replace(
        "rpx",
        ""
      );
      this.marginLeft = this.editConfigCom?.style?.marginLeft?.replace(
        "rpx",
        ""
      );
      this.marginRight = this.editConfigCom?.style?.marginRight?.replace(
        "rpx",
        ""
      );
      this.marginAuto =
        this.marginLeft === "auto" && this.marginRight === "auto";
      this.borderRadius = this.editConfigCom?.style?.borderRadius?.replace(
        "rpx",
        ""
      );
    },
    //----初始化组件信息 start----
    initComponent() {
      const modulesFiles = require.context(
        "./componentAttributeConfig",
        true,
        /\.vue$/
      );
      const modules = modulesFiles.keys().reduce((modules, modulePath) => {
        const moduleName = modulePath
          .replace(/^\.\/(.*)\.\w+$/, "$1")
          .replace("base/", "")
          .replace("business/", "")
          .replace("/index", "");
        const value = modulesFiles(modulePath);
        modules[moduleName] = value.default;
        return modules;
      }, {});
      this.modules = modules;
      this.initPageCom();
      console.log("modules", modules);
    },
    initPageCom() {
      if (!this.editConfigComActiveId) return;
      const activeCom = this.pageData.items.filter(
        (v) => v.id === this.editConfigComActiveId
      )[0]?.type;
      //同组件下的属性不刷新的问题，需要空后给组件名
      this.curCom = "";
      this.$nextTick(() => {
        this.curCom = this.modules[activeCom];
        this.initComponentData();
      });
    },
    //----初始化组件信息 end----
    //----组件宽高 start----
    onChangeComSize(type) {
      let size = type === "width" ? this.comWidth : this.comHeight;
      if (size) {
        const unit = type === "width" ? "%" : "rpx";
        this.editConfigCom.style[type] = size + unit;
      } else {
        this.editConfigCom.style[type] = "";
      }
    },
    //----组件宽高 end----
    onChangeComPosition(type, value) {
      if (type) {
        this.editConfigCom.style[type] = value + "rpx";
      } else {
        this.editConfigCom.style[type] = "";
      }
    },
    onChangeComMargin(type, value) {
      this.editConfigCom.style[type] = value + "rpx";
    },
    onChangeComBorderRadius(type, value) {
      this.editConfigCom.style[type] = value + "rpx";
    },
    onChangeMarginAuto(val) {
      if (val) {
        this.marginLeft = 0;
        this.marginRight = 0;
        this.$nextTick(() => {
          this.marginLeft = "auto";
          this.marginRight = "auto";
          this.editConfigCom.style.marginLeft = "auto";
          this.editConfigCom.style.marginRight = "auto";
        });
      } else {
        this.marginLeft = 0;
        this.marginRight = 0;
        this.editConfigCom.style.marginLeft = 0;
        this.editConfigCom.style.marginRight = 0;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.component-attribute {
  background-color: white;
  padding: 0 8px;
  &-item {
    //width: 90%;
    margin: 20px auto 0 auto;
    padding: 10px;
    border-radius: 6px;
    background-color: #FFFFFF;
  }
  .u-slot-slider {
    width: 100%;
    display: flex;
    align-items: center;
    .value-text {
      width: 1.125rem;
    }
    .u-slider {
      flex: 1;
    }
  }
}
</style>
